<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input v-model="name" placeholder="请输入学生姓名" />
        <input v-model="sex" placeholder="请输入学生性别" />
        <input v-model="classId" type="number" placeholder="请输入学生班级ID" />
        <button @click="insert()">插入学生信息</button>
    </div>
    <div>
        <input v-model="searchName" placeholder="请输入模糊查询学生姓名" />
        <input v-model="age" placeholder="根据年龄查询" />
        <button @click="getList()">查询</button>
    </div>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div style="width: 100px;">ID</div>
            <div style="width: 100px;">姓名</div>
            <div style="width: 100px;">性别</div>
            <div style="width: 100px;">年龄</div>
            <div style="width: 100px;">班级ID</div>
        </div>
        <div v-for="item in list" style="display: flex;flex-direction: row;">
            <div style="width: 100px;">{{item.id}}</div>
            <input style="width: 100px;" v-model="item.name"/>
            <div style="width: 100px;">{{item.sex}}</div>
            <div style="width: 100px;">{{item.age}}</div>
            <div style="width: 100px;">{{item.classId}}</div>
            <button @click="updates(item.id,item.name)">更新</button>
            <button @click="deletes(item.id)">删除</button>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            sex: '',
            classId: '',
            searchName: '',
            age:'',
            list: []
        },
        //页面初始化调用
        mounted() {
            this.getList() //获取所有学生信息
        },
        methods: {
            insert() {
                axios
                    //填写接口地址，参数用字符拼接起来
                    .get('http://localhost:8080/student/insertJpa?name=' + this.name + '&sex=' + this.sex + '&classId=' + this.classId)
                    .then(response => {
                        alert(response.data)
                        //添加完成后清空输入框
                        this.name = ''
                        this.sex = ''
                        this.classId = ''
                        //添加完成后刷新列表
                        this.getList()
                    })

            },
            getList() {
                var age = 0;

                if(this.age!=""){
                    age  = this.age;
                }
                //获取学生信息
                axios
                    .get('http://localhost:8080/student/findAllJpaByName?name='+this.searchName+'&age='+age)
                    .then(response => {
                        this.list = response.data
                    })
            },
            deletes(id) {
                axios
                    .get('http://localhost:8080/student/deleteJpa?id=' + id)
                    .then(response => {
                        alert(response.data)
                        //删除完成后刷新列表
                        this.getList()
                    })
            },
            updates(id,newName) {
                axios
                    .get('http://localhost:8080/student/updateJpa?id=' + id+'&name='+newName)
                    .then(response => {
                        alert(response.data)
                        //更新完成后刷新列表
                        this.getList()
                    })
            }
        }
    })
</script>
</body>
</html>
